<template>
    <div class="ApiDocument">
        <div class="ApiDocument-menu">
            <h2>目录</h2>
            <br>
            <div class="ApiDocument-menu-box">
                <div class="ApiItem" :class="{Active : activePath == item.path }" v-for="(item,index) in ApiConfig" :key="'p' + index">
                    <div class="ApiItemName" @click="openChildView(item)">
                        <span class="ApiItemTitle">{{item.name}} </span>
                        <span class="ApiItemDes"> ({{item.description}})</span>
                    </div>
                    <div class="ApiItem" :class="{Active : activePath == item.path }" v-for="(item,index) in item.children" :key="'p' + index">
                        <div class="ApiItemName" @click="openChildView(item)">
                            <span class="ApiItemTitle">{{item.name}} </span>
                            <span class="ApiItemDes"> ({{item.description}})</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ApiDocument-content">
            <div class="ApiDocument-Box" v-html="Codes"></div>
        </div>
    </div>
</template>

<script>
import { marked } from 'marked';
import Prism from 'prismjs'
var langTypes = {
    js: 'javascript',
    css: 'css',
    html: 'html'
}

langTypes[undefined] = 'javascript';

marked.setOptions({
    highlight: function (code, lang, callback) {
        if (lang) {
            var html = Prism.highlight(code, Prism.languages[langTypes[lang]], lang);
            callback('', html);
        } else {
            callback('', html);
        }
    }
});

export default {
    props: ['value'],
    data() {
        return {
            Codes: '',
            activePath: null,
            status: this.value,
            ApiConfig: window.ApiConfig,
            DocumentTitle: '',
        }
    },
    watch: {
        value(newValue) {
            this.status = newValue;
        },
    },
    methods: {
        readFile(url) {
            let xhr = new XMLHttpRequest();
            var time = new Date().getTime();
            xhr.open('GET', url + '?t=' + time, false);
            xhr.overrideMimeType("text/html;charset-utf8");
            xhr.send(null);
            return xhr.status === 200 ? xhr.responseText : null;
        },
        openChildView(item) {
            this.Codes = this.readFile(item.path);
            this.activePath = item.path;
            this.DocumentTitle = item.name;
            this.$emit('input', true);
        }
    }
}
</script>

<style>
.ApiDocument-menu-box {
    position: absolute;
    top: 70px;
    bottom: 20px;
    left: 0px;
    right: 20px;
    padding: 0 0 70px 20px;
    overflow-x: hidden;
    overflow-y: auto;
}
.ApiDocument-menu-box::-webkit-scrollbar {
    width: 7px;
    height: 10px;
}

.ApiDocument-menu-box::-webkit-scrollbar-thumb {
    background: #b3b3b3;
}

.ApiDocument-menu-box::-webkit-scrollbar-thumb,
.ApiDocument-menu-box::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.ApiItem {
    padding: 5px 0 5px 10px;
    font-size: 16px;
    font-family: Consolas, "Courier New", monospace !important;
    cursor: pointer;
    position: relative;
}
.ApiItem.Active > .ApiItemName {
    color: cornflowerblue;
}
.ApiItem.Active::before {
    color: cornflowerblue;
    content: "●";
    display: block;
    position: absolute;
    left: -10px;
}
.ApiItem > .ApiItem {
    margin-left: 20px;
}
.ApiDocument-Box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 880px;
    bottom: 0;
    overflow-y: scroll;
}
.ApiDocument-Box h4.name {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.ApiDocument-Box td,
.ApiDocument-Box th {
    padding: 4px 6px !important;
}

.ApiDocument-Box .tag-source {
    display: none;
}

.ApiDocument-Box #main {
    width: 95%;
}

.ApiDocument-Box {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 870px;
    bottom: 20px;
    overflow-y: auto;
    padding: 0 20px 70px 10px;
}

.ApiDocument-Box::-webkit-scrollbar {
    width: 7px;
    height: 10px;
}

.ApiDocument-Box::-webkit-scrollbar-thumb {
    background: #b3b3b3;
}

.ApiDocument-Box::-webkit-scrollbar-thumb,
.ApiDocument-Box::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}
</style>